<template>
  <div>
    <div>
   
       
          <div class="AUTO-common-layout-center">
 
            <div class="AUTO-common-layout-main AUTO-flex-main" style="border:1px solid #EBEEF5;">
              <div class="AUTO-common-head">
                <div class="AUTO-opts">
                  <slot name="left" />
                  <el-button type="primary" icon="el-icon-plus" :disabled="false" @click="handleAddEdit()">
                    新建
                  </el-button>
                  
                </div>
 
              </div>
 
              <el-form ref="formAuto"   :disabled="false">
                <el-table ref="table" :data="tableData" border style="width: 100%" max-height="250">
                  <el-table-column  type="selection" :width="50" />
                  <el-table-column  type="index" :label="'序号'" :width="50" />
                  <el-table-column
                    v-for="(item, index) in tableLabel"
                    :key="AutoElTable"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                    align="center"
                  >
                    <template v-slot="scope">
                      <el-form-item :prop="`tableData[` + scope.$index + `].` + [item.prop]"  label-width="0">
 
                        <el-input v-if="item.type === 'string'" v-model="scope.row[item.prop]" />
 
                        <el-date-picker v-if="item.type === 'number'" v-model="scope.row[item.prop]" style="width: 100%;" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
 
                        <el-select v-if="item.type === 'array'" v-model="scope.row[item.prop]" style="width: 100%;" filterable clearable :multiple="item.multiple" collapse-tags>
                          <el-option v-for="item in item.option" :key="item.encode" :label="item.fullName" :value="item.encode" />
                        </el-select>
 
                        <el-switch v-if="item.type === 'switch'" v-model="scope.row[item.prop]" active-color="#004efc" inactive-color="#ff4949" />
 
                      </el-form-item>
                    </template>
                  </el-table-column>
 
                  
 
                </el-table>
                
              </el-form>
            </div>
 
          </div>
 
    </div>
  </div>
</template>
 
<script>
import { v4 as uuidv4 } from 'uuid'
 
export default {
  name: 'AutoElTable',
  components: {},
  props: {
  
  },
  data() {
    return {
          tableData: [],
          tableLabel: [
            {
              label: '传输设备运行',
              width: '',
              prop: '1_1',
              type: 'string',
              option: [{ encode: '1', fullName: '正常' }, { encode: '2', fullName: '停用' }]
            },
            {
              label: '交换设备运行',
              width: '',
              prop: '1_2',
              type: 'array',
              option: [{ encode: '1', fullName: '正常' }, { encode: '2', fullName: '停用' }]
            },
            {
              label: '网络设备运行',
              width: '',
              prop: '1_3',
              type: 'array',
              option: [{ encode: '1', fullName: '正常' }, { encode: '2', fullName: '停用' }]
            },
            {
              label: '电源设备运行',
              width: '',
              prop: '1_4',
              type: 'array',
              option: [{ encode: '1', fullName: '正常' }, { encode: '2', fullName: '停用' }]
            },
            {
              label: '空调设备运行',
              width: '',
              prop: '1_5',
              type: 'array',
              option: [{ encode: '1', fullName: '正常' }, { encode: '2', fullName: '停用' }]
            }
          ],
         
		}
  },
  created() {
   
  },
  methods: {
    handleAddEdit() {
      const obj = {}
      for (let i = 0; i < this.tableLabel.length; i++) {
        const item1 = this.tableLabel[i].prop
        obj[item1] = undefined
      }
    
      this.tableData.push(obj)
      
    },
   
  }
}
</script>
<style lang="scss" scoped>
 
 
.AUTO-common-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px;
  flex-shrink: 0;
 
  .AUTO-common-head-right {
    flex-shrink: 0;
    font-size: 0;
 
    .el-link {
      margin-left: 12px;
    }
 
    .AUTO-common-head-icon {
      color: #606266;
    }
  }
}
 
.AUTO-common-layout-center {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
 
  .AUTO-common-layout-main {
    flex: 1;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
 
    &.nohead {
      padding-top: 10px;
    }
  }
}
 
.AUTO-flex-main {
  display: flex;
  flex-direction: column;
 
  .el-table {
    flex: 1;
 
    &::before {
      border-bottom: 0;
      height: 0
    }
  }
 
  .el-table__fixed::before,
  .el-table__fixed-right::before {
    border-bottom: 0;
    height: 0
  }
}
 
.AUTO-opts {
  display: inline-block;
}
 
::v-deep .el-table thead tr {
  background-color: #FFFFFF !important;
}
 
::v-deep .el-table thead tr th {
  background-color: #FFFFFF !important;
}
 
::v-deep .el-collapse-item__header {
  padding-left: 10px;
}
 
::v-deep .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
 
::v-deep .el-form-item--small .el-form-item__error {
  margin-bottom: 20px;
}
 
::v-deep .el-form-item.is-error {
  margin-bottom: 20px
}
 
::v-deep .el-pagination {
  padding: 10px 15px;
}
 
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
 
.pagination {
  background: #fff;
  text-align: right;
}
 
.pagination.hidden {
  display: none;
}
</style>